<template>
  <div class='container'>
    <el-card>
      <!-- 搜索栏 -->
      <el-form :inline='true' :model='searchForm' class='search-form'>
        <el-form-item label='标签名称'>
          <el-input
            v-model='searchForm.tagName'
            placeholder='请输入标签名称'
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.state"
            placeholder="请选择"
          >
            <el-option
              label="已启用"
              :value="1"
            />
            <el-option
              label="已禁用"
              :value="0"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearInfo">
            清除
          </el-button>
          <el-button
            type='primary'
            @click='search'
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
       <!-- 新增按钮 -->
      <el-button
        class="colright"
        size="mini"
        type="success"
        icon="el-icon-edit"
        @click="addTags"
      >
        新增标签
      </el-button>
      <!-- 返回学科按钮 -->
      <el-button
        class="back-btn"
        v-show="isShow"
        type='text'
        @click='backSubject'
      >
        <span class="el-icon-back" /> 返回学科
      </el-button>
      <!-- 新增弹窗 -->
      <el-dialog
        title="新增标签"
        :visible.sync="addTagsDialogVisible"
        width="30%"
        @close="closeAddTagsDialogVisible"
      >
        <el-form
          :model="addTagsForm"
          :rules="addTagsRules"
          ref="addTagsForm"
        >
          <!-- 所属学科 -->
          <el-form-item label="所属学科">
            <el-select
              v-model="addTagsForm.value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in simpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="标签名称"
            prop="tagsName"
          >
            <el-input
              v-model="addTagsForm.tagName"
              placeholder="请输入标签名称"
            />
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="closeAdd">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="addTagsSubmit"
          >
            确 定
          </el-button>
        </span>
      </el-dialog>
      <!-- 修改弹窗 -->
       <el-dialog
        title="修改目录"
        :visible.sync="editDirectoryVisible"
        width="30%"
      >
        <el-form
          :model="editDirectoryForm"
          label-width="80px"
        >
          <!-- 所属学科 -->
          <el-form-item label="所属学科">
            <el-select
              v-model="editDirectoryForm.value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in simpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-input
              v-model="editDirectoryForm.tagName"
              placeholder="请输入目录名称"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDirectoryVisible = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="editDirectorySubmit"
          >
            确 定
          </el-button>
        </span>
      </el-dialog>
      <!-- 数据数量 -->
      <el-alert
        class="num"
        :title="`数据一共 ${tagsList.counts} 条`"
        :closable="false"
        type="info"
        show-icon
      />
      <!-- 表格 -->
      <my-table
        :table-props="{
          data:tagsList.items,
        }"
        :columns="[
          {label: '序号', prop: 'index', align: 'center', width: '50'},
          {label: '所属学科', prop: 'subjectName', align: 'center', width: '120'},
          {label: '标签名称', prop: 'tagName', align: 'center', width: '120'},
          {label: '创建者', prop: 'username', align: 'center', width: '120'},
          {label: '创建日期', prop: 'addDate', align: 'center'},
          {label: '状态', prop: 'state', align: 'center', width: '120'},
          {label: '操作', slotName: 'operators', align: 'center', fixed: 'right'},
        ]"
        :pagination-props="{
          background: true,
          layout: 'prev, pager, next, sizes, jumper',
          total: tagsList.counts,
          pageSizes: [5, 10, 15, 20]
        }"
        :pagination-events="events"
      >
        <template v-slot:operators="scope">
          <el-button
            type="text"
            size="small"
            @click="stateChange(scope.row)"
          >
            {{scope.row.state === "已启用" ? '禁用' : '启用'}}
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.state === '已启用' ? true : false"
            size="small"
            @click="editDirectory(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.state === '已启用' ? true : false"
            size="small"
            @click="deleteTags(scope.row)"
          >
            删除
          </el-button>
        </template>
      </my-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as tagsApi from '@/api/hmmm/tags'
let needId = null;
let needSubjectId = null;
export default {
  name: 'TagsList',
  data() {
    return {
      isShow: false,
      currentPage: 1,
      pagesize: 10,
      events: {
        'size-change': this.handleSizeChange,
        'current-change': this.handleCurrentChange
      },
      // 搜索栏
      searchForm: {},
      // 新增弹窗
      addTagsDialogVisible: false,
      // 新增表单
      addTagsForm: {
        tagName: '',
        value: '',
      },
      // 新增表单验证
      addTagsRules: {
        tagsName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      // 修改弹窗
      editDirectoryVisible: false,
      // 修改
      editDirectoryForm : {
        // 所属学科
        tagName: '',
        value: '',
      },
    }
  },
  computed: {
    ...mapState('tags', [
      'tagsList'
    ]),
    ...mapState('subjects', [
      'simpleList'
    ])
  },
  methods: {
    ...mapActions('tags', [
      'getTagsList'
    ]),
    ...mapActions('subjects', [
      'getSimpleList'
    ]),
    // 一页显示多少条改变时
    handleSizeChange(val) {
      if (!this.$route.params.id) {
        this.pagesize = val
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize
        })
      } else {
        this.pagesize = val
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 当前页改变
    handleCurrentChange(val) {
      if (!this.$route.params.id) {
        this.currentPage = val
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize
        })
      } else {
        this.currentPage = val
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 清空搜索栏
    clearInfo() {
      if (!this.$route.params.id) {
        this.searchForm = {}
        // 刷新页面
        this.getTagsList({
          page: 1,
          pagesize: this.pagesize
        })
      } else {
        this.searchForm = {}
        // 刷新页面
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 搜索
    search() {
      this.getTagsList({
        page: 1,
        pagesize: this.pagesize,
        ...this.searchForm,
      })
    },
    // 返回学科按钮
    backSubject() {
      this.$router.go(-1)
    },
    // 新增标签按钮
    addTags() {
      if (!this.$route.params.id) {
        this.addTagsDialogVisible = true
      } else {
        this.addTagsDialogVisible = true
        this.addTagsForm.value = this.$route.params.id
      }
    },
    // 关闭新增弹窗
    closeAddTagsDialogVisible() {
      // 清空
      this.addTagsForm.tagsName = ''
    },
    // 取消新增
    closeAdd() {
      this.$refs.addTagsForm.resetFields()
      this.addTagsDialogVisible = false
    },
    // 提交新增
    addTagsSubmit() {
      // 提交
      if (!this.$route.params.id) {
        tagsApi.add({
          tagName: this.addTagsForm.tagName,
          subjectID: this.addTagsForm.value
        })
        // 清空
        this.addTagsForm = {}
        // 关闭弹窗
        this.$refs.addTagsForm.resetFields()
        this.addTagsDialogVisible = false
        // 200毫秒后刷新页面
        setTimeout(() => {
          this.getTagsList({
            page: 1,
            pagesize: this.pagesize
          })
        }, 200)
      } else {
        tagsApi.add({
          tagName: this.addTagsForm.tagName,
          subjectID: this.$route.params.id
        })
        // 清空
        this.addTagsForm = {}
        // 关闭弹窗
        this.$refs.addTagsForm.resetFields()
        this.addTagsDialogVisible = false
        // 200毫秒后刷新页面
        setTimeout(() => {
          this.getTagsList({
            page: 1,
            pagesize: this.pagesize,
            subjectID: this.$route.params.id
          })
        }, 200)
      }
    },
    // 修改标签
    editDirectory(row) {
      this.editDirectoryVisible = true;
      needId = row.id;
      needSubjectId = row.subjectID;
      console.log(needId);
      console.log(needSubjectId);
      // 返显
      console.log(row.tagName);
      this.editDirectoryForm.tagName = row.tagName
      this.editDirectoryForm.value = row.subjectID
    },
    // 修改目录提交
    editDirectorySubmit() {
      if (!this.$route.params.id) {
        // 修改确认
        tagsApi.update({
          id: needId,
          subjectID: needSubjectId,
          tagName: this.editDirectoryForm.tagName,
        })
        // 关闭弹窗
        this.editDirectoryVisible = false
        // 刷新
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize
        })
      } else {
        // 修改确认
        tagsApi.update({
          id: needId,
          subjectID: needSubjectId,
          tagName: this.editDirectoryForm.tagName,
        })
        // 关闭弹窗
        this.editDirectoryVisible = false
        // 刷新
        this.getTagsList({
          page: this.currentPage,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 改变状态
    stateChange(row) {
      if (!this.$route.params.id) {
        tagsApi.changeState({
          id: row.id,
          state: row.state === '已启用' ? 0 : 1
        })
        this.$message.success('操作成功')
        // 200毫秒后刷新列表
        setTimeout(() => {
          this.getTagsList({
            page: this.currentPage,
            pagesize: this.pagesize,
          })
        }, 200)
      } else {
        tagsApi.changeState({
          id: row.id,
          state: row.state === '已启用' ? 0 : 1
        })
        this.$message.success('操作成功')
        // 200毫秒后刷新列表
        setTimeout(() => {
          this.getTagsList({
            page: this.currentPage,
            pagesize: this.pagesize,
            subjectID: this.$route.params.id
          })
        }, 200)
      }
    },
    // 删除标签
    deleteTags(row) {
      if (!this.$route.params.id) {
        this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          tagsApi.remove({
            id: row.id
          })
          this.$message.success('删除成功')
          // 200毫秒后刷新列表
          setTimeout(() => {
            this.getTagsList({
              page: this.currentPage,
              pagesize: this.pagesize,
            })
          }, 200)
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      } else {
        this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          tagsApi.remove({
            id: row.id
          })
          this.$message.success('删除成功')
          // 200毫秒后刷新列表
          setTimeout(() => {
            this.getTagsList({
            page: this.currentPage,
            pagesize: this.pagesize,
            subjectID: this.$route.params.id
            })
          }, 200)
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      }
    },
  },
  created() {
    this.getSimpleList()
    console.log(this.$route.params.id);
    if (!this.$route.params.id) {
      this.getTagsList({
        page: this.currentPage,
        pagesize: this.pagesize
      })
    } else {
      this.isShow = !this.isShow
      this.getTagsList({
        page: this.currentPage,
        pagesize: this.pagesize,
        subjectID: this.$route.params.id
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  .num {
    margin-bottom: 20px;
  }

  .colright,
  .back-btn {
    float: right;
    margin-bottom: 8px;
    margin-left: 30px;
  }
}
</style>
